<template>
	<view :class="{'bind':pageSc}">
		<view class="ahdhdhfjh">
			<!-- 搜索框 -->
			<view class="search-bar">
				<uni-search-bar radius="100" cancelButton="none" @confirm="search" @clear="clear" @input="input"
					placeholder="多条件搜索请用空格间隔" @focus="foucs" />
			</view>
			<fy-dropdown ref="dropdown" :menuList="menuList" @pageScFn="pageScFn">
				<fy-dropdown-item v-model="filterValue" dropdownKey="filter" :options="filterOptions" type="column"
					@change="handlerColumnChange"></fy-dropdown-item>

				<fy-dropdown-item v-model="sortValue" dropdownKey="sort" :options="sortOptions"
					@change="handlerTypeChange">
				</fy-dropdown-item>
			</fy-dropdown>

			<!-- 显示筛选条件 -->
			<view class="showFilter" v-show="showArr">
				<view class="flexFilter">
					<view class="defaultClass" v-for="(item,index) in activeList" :key="index">
						<text class="showText">
							{{item}}
						</text>
					</view>
				</view>
			</view>
		</view>


		<view style="margin-top: -20rpx; position: relative;">
			<!-- 管道内壁耐磨防腐 -->
			<view class="project_list">
				<view class="project_box" @click="goToDatail(item)" v-for="(item,index) in projectList" :key="index">
					<view class="list_top">
						<view class="list_left">
							<image src="http://106.14.56.171:15016/images/u425.png"></image>
							<text>{{item.prjName}}</text>
						</view>
						<view class="list_right">
							<image src="http://106.14.56.171:15016/images/u3063.png"></image>
						</view>
					</view>
					<view class="list_base">
						<view class="base_left">
							<view class="prjtypeText">
								<text v-if="item.prjType !=4">{{item.serviceCode_Zn}}</text>
								<!-- 船舶环氧 -->
								<text v-if="item.prjType ==4">{{item.serviceCode_Zn}}</text>
							</view>
							<fileImage :src="item.coverPicUrl" :className="['in-cidental']" />
						</view>
						<view class="base_right">
							<!-- 服务方 -->
							<view class="one">
								<text class="base_right_text">服务方</text>
								<text class="base_right_textTwo">{{item.serviceSeller_Zn || ''}}</text>
							</view>
							<!-- 业主方 -->
							<view class="one">
								<text class="base_right_text">业主方</text>
								<text class="base_right_textTwo"
									v-if="item.prjType !=4">{{item.serviceOwner || ''}}</text>
								<text class="base_right_textTwo"
									v-if="item.prjType ==4">{{item.serviceOwner|| ''}}</text>
							</view>
							<!-- 委托方 -->
							<view class="one" v-if="item.serviceOwner!=item.serviceBuyer">
								<text class="base_right_text">委托方</text>
								<text class="base_right_textTwo">{{item.serviceBuyer || ''}}</text>
							</view>
							<view class="threeStates">
								<view>
									<text>{{item.prjStatus_Zn}}</text>
									<text class="viewTyp"
										v-if="(item.prjStatus_Zn =='施工中' || item.prjStatus_Zn =='暂停中' )&&item.prjType !='4' ">{{item.realityHours}}%</text>
									<text class="viewTyp"
										v-if="(item.prjStatus_Zn =='施工中' || item.prjStatus_Zn =='暂停中' )&&item.prjType=='4'&&item.planHours">{{item.planHours/100}}%</text>

								</view>
								<view class="grey" v-if="item.prjType !=4 &&item.invoiceStatus == 0">
									<text v-if="item.invoiceStatus == 0">未开票</text>
								</view>
								<view class="viewType" v-if="item.prjType !=4&&item.invoiceStatus != 0">
									<text>{{item.invoiceStatus == 1?'部分开票':item.invoiceStatus == 2?'全额开票':''}}</text>
								</view>
								<view class="viewType" v-if="item.prjType !=4&&item.settleStatus != 0">
									<text>{{item.settleStatus == 1?'部分回款':item.settleStatus == 2?'全额回款':''}}</text>
								</view>

								<view v-if="item.prjType !=4&&item.settleStatus == 0" class="grey">
									<text v-if="item.settleStatus == 0">未回款</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import fydropdown from '@/components/fy-dropdown/fy-dropdown.vue';
	import fydropdownitem from '@/components/fy-dropdown-item/fy-dropdown-item.vue';
	import fileImage from '@/components/fileImage/fileImage.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		debounce,
		showLoading
	} from '@/config/debounce.js'
	export default {
		components: {
			fydropdown,
			fydropdownitem,
			fileImage
		},
		data() {
			return {
				pageSc: false,
				pgList: "50",
				menuList: [{
					title: '筛选',
					dropdownKey: 'filter'
				}, {
					title: '排序',
					dropdownKey: 'sort'
				}],
				//项目主页列表
				formParam: {
					searchValue: "", //搜索
					pageNo: 1,
					pageSize: 10,
					typeList: [], //类型集合
					prjTypeList: [], //服务类型集合
					prjStatusList: [], //状态集合

					prjSort: 2,
					// companyName:this.userInfo.companyId
					companyName: ""
				},
				projectList: [],
				filterValue: '',
				ifBottomRefresh: false,
				filterOptions: [{
						title: '项目所属',
						key: 'rangeType',
						default: [],
						defaultList: [],
						defaultReset: [],
						list: [{
							text: '我参与的',
							value: '1'
						}, {
							text: '我公司的',
							value: '2'
						}, {
							text: '我关注的',
							value: '3'
						}]
					},
					{
						title: '项目类型',
						key: 'prjType',
						default: [],
						defaultList: [],
						defaultReset: [],
						list: []
					},
					{
						title: '项目状态',
						key: 'prjStatus',
						default: [],
						defaultList: [],
						defaultReset: [],
						list: [{
								text: '施工中',
								value: '2'
							}, {
								text: '暂停中',
								value: '3'
							}, {
								text: '已完工',
								value: '4'
							},
							{
								text: '待签收',
								value: '8'
							}, {
								text: '已收货',
								value: '5'
							},
							{
								text: '已中止',
								value: '6'
							}
						]
					},
					{
						title: '开票状态',
						key: 'invoiceStatusList',
						default: [],
						defaultList: [],
						defaultReset: [],
						list: [{
							text: '未开票',
							value: '0'
						}, {
							text: '部分开票',
							value: '1'
						}, {
							text: '全额开票',
							value: '2'
						}]
					},
					{
						title: '回款状态',
						key: 'settleStatusList',
						default: [],
						defaultList: [],
						defaultReset: [],
						list: [{
							text: '未回款',
							value: '0'
						}, {
							text: '部分回款',
							value: '1'
						}, {
							text: '全额回款',
							value: '2'
						}]
					}

				],
				sortValue: '2',
				sortOptions: [{
						label: '项目创建时间升序',
						value: 1
					},
					{
						label: '项目创建时间降序',
						value: 2
					},

					{
						label: '完工时间升序',
						value: 3
					},
					{
						label: '完工时间降序',
						value: 4
					},
					{
						label: '交付时间升序',
						value: 5
					},
					{
						label: '交付时间降序',
						value: 6
					}
				],
				isHasNextPages: false,
				scrollTop: '', //滚动得高度
				showArr: false,
				limitLoad: false, // 防止重复加载
				activeList: []
			}
		},
		onLoad: function() {
			this.getdrown();
			// let getToken = uni.getStorageSync("userInfo")
			// if (getToken != '') {} else {
			// 	this.filterOptions[0].list = []
			// /}
			this.formParam.pageNo = 1
			this.ifBottomRefresh = false
			this.GetProjectList()

		},
		// 微信分享个人
		onShareAppMessage(options) {},
		// 微信分享到朋友圈
		onShareTimeline(options) {},
		onShow() {
			this.formParam.pageNo = 1;
			this.ifBottomRefresh = false;
		},


		// 下拉刷新
		onPullDownRefresh() {
			this.formParam.pageNo = 1;
			this.ifBottomRefresh = false;
			this.GetProjectList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		// 触底加载
		onReachBottom() {
			this.ifBottomRefresh = true
			if (this.isHasNextPages == true) {
				this.formParam.pageNo++
				this.GetProjectList()
			}
		},
		computed: {
			...mapState(['userInfo'])

		},
		onHide() {
			getApp().globalData.typeState = ''
		},

		methods: {
			pageScFn(b) {
				this.pageSc = b
			},
			//获取列表数据
			GetProjectList: debounce(function() {
				if (this.limitLoad) return
				this.limitLoad = true
				showLoading({
					mask: true
				})
				this.formParam.companyName = this.userInfo.corpName
				this.$http.post('api/Project/GetProjectAndEpoxyList', this.formParam).then((res) => {
					this.limitLoad = false
					uni.hideLoading()
					// console.log('------------', res.items);
					this.isHasNextPages = res.hasNextPages
					// 进度条判断
					if (!Array.isArray(res.items)) return
					res.items = res.items.map((code, index) => {
						// console.log(index, '7777777777777777777777777', code)
						let percentage = 0 // 项目进度
						// 状态 2 施工中,3 暂停,6终止用 实际/限额 如果结果大于100 用99
						if (['2', '3', '6'].includes(code.prjStatus)) {
							if (code.planHours <= 0) percentage = 0
							else {
								let numTage = (code.realityHours / code.planHours) * 100
								// console.log(numTage, '---------------------------------')
								if (Number(numTage) >= 100) percentage = 99
								else if (Number(numTage) < 1) percentage = 1
								else percentage = Math.trunc((numTage))
							}
						} else if (['0', '1'].includes(code.prjStatus)) {
							// 状态为  0或者1 直接为0
							percentage = 0
						} else {
							// 其他为100
							percentage = 100
						}
						return {
							...code,
							realityHours: percentage,
						}
					})
					if (this.ifBottomRefresh) {
						this.projectList = this.projectList.concat(res.items);
						// console.log('this.projectList',this.projectList.createTime);
						this.ifBottomRefresh = false;
					} else {
						this.projectList = res.items;
						console.log(this.projectList,9999999999999);
					}
				}).catch(err => {
					uni.hideLoading()
					this.limitLoad = false
				})
			}, 300),
			//筛选确定时触发的事件
			handlerColumnChange(e) {
				console.log("确定", e);
				this.showArr = true
				if (e.cancel) return;
				this.filterOptions.forEach(item => {
					item.default = e.data[item.key];
				})
				this.projectList = []
				this.formParam.pageNo = 1
				this.formParam.typeList = e.data.rangeType //类型集合
				this.formParam.prjTypeList = e.data.prjType //服务类型集合
				this.formParam.prjStatusList = e.data.prjStatus //状态集合
				this.formParam.invoiceStatusList = e.data.invoiceStatusList //开票状态
				this.formParam.settleStatusList = e.data.settleStatusList //回款状态

				this.GetProjectList()
				this.handleData(this.filterOptions, e.data);

			},
			//搜索的事件
			search(e) {
				this.projectList = []
				this.formParam.pageNo = 1
				this.formParam.searchValue = e.value
				this.GetProjectList()
			},
			//点击确定筛选出default种和原始数组中相同的对象
			handleData(target, source) {
				if (!target || !source) {
					return
				}
				let filterOptions = []
				target.forEach((code) => {
					let list = code.list.filter(key => {
						return source[code.key].some(nxt => nxt == key.value)
					})
					if (Array.isArray(list) && list.length > 0) {
						filterOptions.push(list.map(key => key.text).join(' / '))
					}
				})
				this.activeList = filterOptions
				console.log(filterOptions);
				if (filterOptions.length == 0) {
					this.showArr = false
				}
				return
			},
			//清除搜索事件
			clear() {
				this.projectList = []
				this.formParam.pageNo = 1
				this.formParam.searchValue = ''
				this.GetProjectList()
			},
			//监听输入法清楚事件
			input(res) {
				// console.log(res);
				if (res == '') {
					this.projectList = []
					this.formParam.pageNo = 1
					this.formParam.searchValue = ''
					this.GetProjectList()
				}
			},
			//点击跳转详情页
			goToDatail(item) {
				console.log(item);
				//判断是否环氧项目
				if (item.prjType != '4') {
					uni.navigateTo({
						url: './project_detail/project_detail?id=' + item.prjInfoId
					});
				} else {
					uni.navigateTo({
						url: '/pages/epoxyfile/index?id=' + item.prjInfoId
					});

				}
			},
			//排序
			handlerTypeChange(e) {
				this.projectList = []
				this.formParam.pageNo = 1
				this.formParam.prjSort = e
				this.GetProjectList()
			},
			// 获取类型下拉数据
			getdrown() {
				this.$http.get('api/Project/GetPrjServiceTypeDict').then((res) => {
					this.filterOptions.forEach((el) => {
						// console.log(el);
						if (el.key == "prjType") {
							res.map((item) => {
								let obj = {
									value: item.serviceCode,
									text: item.serviceName
								};
								el.list.push(obj)
							})
						}
					})
				})
			},
			foucs() {
				//点开筛选界面后，不做任何选择，然后在搜索栏填写搜索条件后点击搜索，筛选界面应该关闭
				this.$refs.dropdown.close();
			}
		}
	}
</script>

<style lang="less" scoped>
	.bind {
		height: calc(100vh - 78rpx);
		overflow: hidden;
	}

	.search-bar {
		// background-color: #FFFFFF;
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.progressl {
		width: 96%;
	}

	.project_list {
		width: 100%;
		// background-color: #FFFFFF;
	}

	.project_box {
		width: 96%;
		margin-top: 24rpx;
		border-radius: 24rpx;
		background-color: #FFFFFF;
		/* background-color: aqua; */
		margin-left: 2%;
		padding: 9px 0 30rpx 0;
	}

	.list_top {
		height: 40rpx;
		// background-color: palegoldenrod;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;

		.list_left {
			/* background-color: palegreen; */
			padding-left: 4%;
			display: flex;
			align-items: center;

			>image {
				margin-top: 13rpx;
				width: 36rpx;
				height: 36rpx;
			}

			>text {
				margin-left: 20rpx;
				margin-top: 7rpx;
				line-height: 100%;
				box-shadow: none;
				font-family: '微软雅黑 Bold', '微软雅黑';
				font-weight: 700;
				font-style: normal;
				font-size: 30rpx;
				display: inline-block;
				/* 不能加绝对定位,会影响到position: fixed; 使用,在真机调试当中,它的层级的最高 */
				width: 452rpx !important;
				white-space: nowrap;
				// 不允许换行
				overflow: hidden;
				// /* 超出包裹器隐藏 */
				text-overflow: ellipsis;
				/* 显示省略符号来代表被修剪的文本 */
			}
		}

	}

	// 右键小尖头
	.list_right {
		padding-right: 4%;

		// background-color: palegreen;
		>image {
			margin-left: 15rpx;
			width: 10rpx;
			height: 20rpx;
		}
	}

	.list_base {
		margin-top: 20rpx;
		// background-color: brown;
		display: flex;
	}

	.base_right {
		width: 80%;
		margin-left: 16rpx;
		// background-color: aqua;
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
	}

	.base_right .progres {
		height: 35rpx;
		margin-top: 5rpx;
		width: 100%;
	}

	.base_right .one {
		height: 35rpx;
		margin-top: 8rpx;
		width: 100%;
		// background-color: aqua;
	}

	.base_right>.threeStates {
		display: flex;
		height: 35rpx;
		margin-top: 16rpx;
		width: 100%;

		// background-color: aqua;
		>view {
			padding: 0 20rpx 0 20rpx;
			background-color: #ecf4f0;
			border-radius: 80rpx;
			font-size: 24rpx;
			color: #3E9265;
			line-height: 35rpx;
			text-align: center;
		}

		.grey {
			background-color: #F4F4F4;
			// background-color: red;
			color: #A0A0A0;
			margin-left: 19rpx;
		}

		.viewTyp {
			margin-left: 10rpx;
		}

		.viewType {
			margin-left: 19rpx;
		}
	}

	.cehna {
		margin-top: 10rpx;
		// background-color: #04be02;

		>text:nth-child(1) {
			color: #adadad;
		}
	}

	.list_base>.base_left {
		width: 24%;
		height: 160rpx;
		margin-left: 4%;

		.prjtypeText {
			position: absolute;
			width: 115rpx;
			background-color: #B5001F;
			z-index: 9;
			text-align: center;
			line-height: 38rpx;

			>text {
				font-size: 20rpx;
				color: #FFFFFF;
			}

			border-radius:15rpx 0 0 0;
		}


	}

	.list_base .base_right .base_right_text {
		font-size: 26rpx;
		margin-right: 2%;
		color: #999999;
	}

	.list_base .base_right .base_right_textTwo {
		display: inline-block;
		/* 不能加绝对定位,会影响到position: fixed; 使用,在真机调试当中,它的层级的最高 */
		width: 72% !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 100%;
		margin-bottom: -2px;
		font-size: 26rpx;
		color: #424242;
	}

	/deep/.uni-progress-info {
		font-size: 12px !important;
	}

	.ahdhdhfjh {
		position: sticky;
		top: 0;
		width: 100%;
		background-color: #f6f6f6;
		padding: 0 0 5rpx 0;
		z-index: 99;
	}

	.showFilter {
		width: 100%;
		height: 30rpx;
		background-color: #F6F6F6;
		// background-color: aqua;
		margin-bottom: 10rpx;
	}

	// 主父元素
	.flexFilter {
		display: flex;
		width: 700rpx;
	}

	.defaultClass {
		text-align: center;
		width: 30%;
		border: 1px solid #B6001F;
		border-radius: 13px;
		margin-left: 13px;
		line-height: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 0 10rpx 0 10rpx;
	}


	.showText {
		width: 100rpx;
		text-align: center;
		color: #B6001F;
		background-color: rgb(246, 246, 246);
		font-size: 24rpx;
	}

	// 选中的条件渲染到页面上
	.rendered {
		width: 100%;
		background-color: #F6F6F6;
		// background-color: aqua;
		box-sizing: border-box;
		display: flex;
		border-radius: 24rpx;
	}

	.prjStatus {

		.prjStatus-type,
		.prjStatus-status {
			display: inline-block;
			background-color: #fbe9ec;
			height: 40rpx;
			width: 140rpx;
			font-size: 12px;
			border-radius: 20rpx;
			text-align: center;
			line-height: 40rpx;
			color: #DC143C;
			margin-right: 5px;

		}
	}
</style>
<style lang="scss">
	.in-cidental {
		width: 160rpx;
		height: 160rpx;
		margin-right: 10rpx;
		border-radius: 15rpx;
	}

	.fy_dropdown {
		position: relative !important;
		top: auto !important;
	}
</style>
